<template>
  <el-drawer
    :model-value="isShowReceiveDetail"
    :title="$t('收款详情')"
    size="30%"
    @close="emit('close', payStatus)"
    v-cloak
  >
    <div v-loading="loading">
      <div class="flex items-start justify-between mb-4">
        <span class="rowName" style="color: #333">{{ $t("订单状态") }}</span>
        <span class="rowValue">
          <el-tag :type="getUserStatusName(detailInfo.status)?.type">{{
            getUserStatusName(detailInfo.status)?.name
          }}</el-tag>
        </span>
      </div>
      <div class="flex items-start justify-between mb-4">
        <span class="rowName" style="color: #333">{{ $t("订单号") }}</span>
        <span class="rowValue">{{ detailInfo.order_no }}</span>
      </div>
      <div class="flex items-start justify-between mb-4">
        <span class="rowName" style="color: #333">{{ $t("创建日期") }}</span>
        <span class="rowValue">{{ formatDates(detailInfo.create_time) }}</span>
      </div>
      <div class="flex items-start justify-between mb-4">
        <span class="rowName" style="color: #333">{{ $t("有效日期") }}</span>
        <span class="rowValue">{{ formatDates(detailInfo.expire_time) }}</span>
      </div>
      <el-divider />
      <h3 class="mb-4 text-large">{{ $t("收款金额") }}</h3>
      <p class="mb-4 text-2xl">
        {{ numberToCurrencyNo(detailInfo.amount) }} {{ detailInfo.currency }}
      </p>
      <div v-if="payStatus === 0">
        <h3 class="mb-4 text-xl">{{ $t("收款码") }}</h3>
        <div
          class="flex items-center justify-center mb-4"
          v-if="detailInfo.pay_url"
        >
          <qrcode-vue
            :value="detailInfo.pay_url"
            :size="150"
            level="H"
          ></qrcode-vue>
        </div>
        <p v-else class="mb-4">--</p>
        <h3 class="mb-4 text-xl">{{ $t("收款链接") }}</h3>
        <p class="text-[#e54c5f] mb-6">{{ detailInfo.pay_url || "--" }}</p>
        <div @click="copyLink" class="w-full copyBtn">{{ $t("复制链接") }}</div>
        <el-divider />
        <p class="mb-6 text-center">
          {{ $t("仅支持Visa、Mastercard进行支付") }}
        </p>
      </div>
      <div v-else>
        <h3 class="mb-4 text-large">{{ $t("详情") }}</h3>
        <div
          v-for="(item, index) in detailList"
          :key="index"
          class="flex items-start justify-between mb-4"
          v-show="item.isShow"
        >
          <span class="mb-2 rowName">{{ item.name }}</span>
          <span class="rowValue">{{ item.value }}</span>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>
import { ref, watch, computed, reactive } from "vue";
import { GetVAOrdersPayInfo } from "@/api/VAAccount";
import { useI18n } from "vue-i18n";
import { numberToCurrencyNo, formatDates } from "@/utils/utils";
import { dayjs } from "element-plus";
import QrcodeVue from "qrcode.vue";
import { ElMessage } from "element-plus";
const { t } = useI18n();
const props = defineProps({
  isShowReceiveDetail: {
    type: Boolean,
    default: false,
  },
  Id: {
    type: String,
    default: "",
  },
  payStatus: {
    type: Number,
    default: 0,
  },
});
const emit = defineEmits(["close"]);

const loading = ref(false);

watch(
  () => props.Id,
  (val) => {
    if (val) {
      getDetail();
    }
  },
  { immediate: true }
);

const detailInfo = reactive({});

const statusList = computed(() => {
  return [
    { key: 0, name: `${t("待支付")}`, value: 0, type: "success" },
    { key: 1, name: `${t("支付成功")}`, value: 1, type: "warning" },
    { key: 3, name: `${t("超时")}`, value: 3, type: "danger" },
  ];
});

const detailList = computed(() => {
  let arr = [
    {
      name: `${t("订单类型")}`,
      value: detailInfo.pay_type || "-",
      isShow: true,
    },
    {
      name: `${t("收款币种")}`,
      value: detailInfo.currency || "--",
      isShow: true,
    },
    {
      name: `${t("收款金额")}`,
      value: `+ ${detailInfo.amount}` || "--",
      isShow: true,
    },
    {
      name: `${t("付款人姓名")}`,
      value: detailInfo.payer_name || "--",
      isShow: true,
    },
    {
      name: `${t("付款人邮箱")}`,
      value: detailInfo.payer_email || "--",
      isShow: true,
    },
    {
      name: `${t("付款人手机号")}`,
      value: detailInfo.payer_phone || "--",
      isShow: true,
    },
    {
      name: `${t("付款人国家")}`,
      value: detailInfo.payer_country || "--",
      isShow: true,
    },
    {
      name: `${t("付款人城市")}`,
      value: detailInfo.payer_city || "--",
      isShow: true,
    },
    {
      name: `${t("付款人地址")}`,
      value: detailInfo.payer_address || "--",
      isShow: true,
    },
    {
      name: `${t("付款时间")}`,
      value:
        dayjs(detailInfo.create_time * 1000).format("YYYY-MM-DD HH:mm:ss") ||
        "--",
      isShow: true,
    },
  ];
  return arr;
});

const getDetail = async () => {
  try {
    loading.value = true;
    const res = await GetVAOrdersPayInfo({
      order_no: props.Id,
    });
    if (res) {
      for (const item in res) {
        detailInfo[item] = res[item];
      }
    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
    console.log(e);
  }
};

const copyLink = () => {
  navigator.clipboard
    .writeText(detailInfo.pay_url)
    .then(() => {
      showSuccessMessage(t("复制成功"));
    })
    .catch((error) => {
      return false;
      //    console.error("复制失败: ", error);
    });
};
const showSuccessMessage = (message) => {
  ElMessage({
    showClose: true,
    message: message,
    type: "success",
  });
};

const getUserStatusName = (status) => {
  if (status > -1) {
    return statusList.value.find((i) => status === i.key);
  }
};
</script>
<style lang="scss" scoped>
.rowName {
  min-width: 30%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #777;
}

.rowValue {
  word-break: break-all;
  text-align: right;
}
.setBtn,
.copyBtn {
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
.setBtn {
  color: #e54c5f;
  border: 1px solid #e54c5f;
}
.copyBtn {
  background: #e54c5f;
  color: #fff;
}
</style>
